<template>
  <app-container>
    <app-block is-search>
      <zm-tabs
        :list="tabList"
        v-model="searchForm.tabType"
        @tab-click="tabClick"
        label-key="name"
        name-key="value"
        class="mb20"
      ></zm-tabs>
      <el-form inline :model="searchForm" ref="searchForm" size="small">
        <el-form-item prop="linkName" label="审批标题:">
          <el-input
            v-model="searchForm.linkName"
            class="w150"
            placeholder="请输入关键字"
          />
        </el-form-item>
        <el-form-item label="审批类型:" prop="processType">
          <zm-data-select
            v-model="searchForm.processType"
            k1="processType"
            placeholder="审批类型"
            class="w200"
          ></zm-data-select>
        </el-form-item>
        <zm-form-item label="提交人员：" prop="accountId">
          <el-cascader
            placeholder="提交人员"
            :props="props"
            v-model="accountId"
            :options="accountList"
            clearable
            filterable
            class="w200"
            @change="accountChange"
          ></el-cascader>
        </zm-form-item>
        <zm-form-item>
          <zm-button type="primary" @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
        <div v-if="searchForm.tabType === '2'">
          <zm-form-item label="" prop="">
            <zm-data-radio
              is-btn
              :list="doneList"
              v-model="searchForm.doneType"
              @change="onSearch"
            />
          </zm-form-item>
        </div>
        <div v-if="searchForm.tabType === '3'">
          <zm-form-item label="" prop="">
            <zm-data-radio
              is-btn
              :list="statusList"
              v-model="searchForm.statusType"
              @change="onSearch"
            />
          </zm-form-item>
        </div>
      </el-form>
    </app-block>
    <app-block>
      <zm-table-data
        :data="tableParams.data"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
      >
      </zm-table-data>
    </app-block>
    <detail-container
      v-if="extendDetailParams.visible"
      v-model="extendDetailParams.visible"
      :id="extendDetailParams.id"
      :business-id="extendDetailParams.id"
      :process-type="extendDetailParams.processType"
      :is-draft="extendDetailParams.isDraft"
      :type="extendDetailParams.type"
      :is-approval="true"
      :is-wait-me="searchForm.tabType"
      @after-save="onSearch"
      :is-sold-product="extendDetailParams.isSoldProduct"
      :return-order-id="extendDetailParams.returnOrderId"
      :draft-id="extendDetailParams.draftId"
      :check-status="extendDetailParams.checkStatus"
    ></detail-container>
  </app-container>
</template>
<script>
import { APPROVAL_STATUS } from '@/model'
import publicApi from '@/api/src/public'
import approveApi from '@/api/src/approve'
import tableMixin from '@/mixins/zmTableMixin'
import { columns, doneList, statusList } from './const'
import DetailContainer from '@/components/DetailContainer'
import { getBaseData } from '@/utils/store'
export default {
  components: { DetailContainer },
  mixins: [tableMixin],
  props: {
    props: {
      type: Object,
      default () {
        return {
          label: 'name',
          value: 'id',
          children: 'accountData'
        }
      }
    }
  },
  data () {
    return {
      columns: columns(this),
      accountList: [],
      searchForm: {
        tabType: '1',
        linkName: '',
        processType: '',
        accountId: '',
        doneType: '1',
        statusType: '1'
      },
      accountId: [],
      tabList: APPROVAL_STATUS,
      doneList,
      statusList,
      extendDetailParams: {
        visible: false,
        id: '',
        businessId: '',
        type: '',
        returnOrderId: ''
      }
    }
  },
  computed: {
  },
  watch: {},
  created () {
    this.getAccountList()
  },
  methods: {
    async getAccountList () {
      const res = await publicApi.getAccountList()
      this.accountList = res
    },
    accountChange (val) {
      this.searchForm.accountId = val[1]
    },
    async loadList () {
      let res = await approveApi.getPageList(this.assignQuery(this.searchForm))
      this.initialTableData(res.list, res.count)
    },
    tabClick () {
      this.searchForm.doneType = '1'
      this.searchForm.statusType = '1'
      this.onSearch()
    },
    onReset () {
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
        this.accountId = []
        this.onSearch()
      }
    },
    onDetail (row) {
      const list = getBaseData().processType
      let type = ''
      switch (row.processType) {
        case '1':
          type = 'product'
          break
        case '2':
          type = 'specialPrice'
          break
        case '3':
          type = 'sale'
          break
        case '4':
          type = 'sale'
          break
        case '5':
          type = 'sale'
          break
        case '6':
          type = 'return'
          break
        case '7':
          type = 'receivable'
          break
        case '8':
          type = 'specialPrice'
          break
        case '9':
          type = 'sale'
          break
        case '10':
          type = 'sale'
          break
        case '11':
          type = 'customer'
          break
        case '12':
          type = 'sale'
          break
        case '13':
          type = 'sale'
          break
      }
      if (+type > 8) {
        this.$message.error('无此类审批项,请联系管理员添加')
        return
      }
      console.log('drafId:', type, row)
      this.extendDetailParams = {
        id: row.businessId,
        businessId: row.businessId,
        processType: row.processType, // 移入公海 缺processType
        draftId: row.draftId,
        type: type,
        isApproval: true,
        isDraft: true,
        isSoldProduct: row.processType === '2',
        returnOrderId: row.orderId, // processType为6时,调用退货详情用的
        visible: true
      }
      console.log(this.extendDetailParams, 'exntete')
    }
  }
}
</script>
